<template>
    <div class="talentPool">
        <el-form :model="form" class="search" :rules="rules">
            <div class="inp_box">
                <el-form-item label="职位名称">
                    <el-input v-model="form.job_name" placeholder="职位名称"></el-input>
                </el-form-item>
                <el-form-item label="公司名称">
                    <el-input v-model="form.company_name" placeholder="公司名称"></el-input>
                </el-form-item>
                <el-form-item label="工作内容">
                    <el-input v-model="form.work_content" placeholder="工作内容"></el-input>
                </el-form-item>
                <el-form-item label="学校名称">
                    <el-input v-model="form.school_name" placeholder="学校名称"></el-input>
                </el-form-item>
                <el-form-item label="证书/获奖名称">
                    <el-input v-model="form.award_name" placeholder="证书/获奖名称"></el-input>
                </el-form-item>
            </div>
            <div class="sel_box">
                <el-form-item label="活跃日期">
                    <el-select v-model="form.active_data">
                        <el-option
                            v-for="item in activeData"
                            :key="item.val"
                            :label="item.label"
                            :value="item.val"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="期望工作地区">
                    <el-select v-model="form.work_place" placeholder="期望工作地区">
                        <el-option
                            v-for="item in options.area"
                            :key="item.val"
                            :label="item.name"
                            :value="item.val"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="现从事行业">
                    <el-cascader
                        :options="options.jobList"
                        :props="{value:'code',label:'name',children:'childVo'}"
                        v-model="form.hope_trade"
                        placeholder="现从事行业"
                    ></el-cascader>
                </el-form-item>
                <el-form-item label="学历">
                    <el-select v-model="form.region" placeholder="学历">
                        <el-option
                            v-for="item in options.education"
                            :key="item.val"
                            :label="item.name"
                            :value="item.val"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <div class="age">
                    <el-form-item label="年龄" class="startAge_box" prop="age_start">
                        <el-input v-model="form.age_start" placeholder="0"></el-input>
                    </el-form-item>
                    <el-form-item class="age_box" prop="age_end">
                        <el-input v-model="form.age_end" placeholder="0"></el-input>
                    </el-form-item>
                </div>
                <el-form-item label="工作年限">
                    <el-select v-model="form.work_exp" placeholder="工作年限">
                        <el-option
                            v-for="item in options.work_exp"
                            :key="item.val"
                            :label="item.name"
                            :value="item.val"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </div>
            <div class="bottom_box">
                <div class="tag">
                    您现在的搜索条件:
                    <el-tag
                        v-for="(tag,index) in Object.keys(form).filter((a,index)=>index<5)"
                        :key="index"
                        closable
                        :type="form[tag]"
                        v-show="form[tag]"
                        @close="handleClose(tag)"
                    >关键字:{{form[tag]}}</el-tag>
                </div>
                <el-form-item class="btn">
                    <el-button type="primary" @click="onSearch">搜索</el-button>
                </el-form-item>
            </div>
        </el-form>
        <div>
            <div class="all">
                <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                <el-button class="downLoad">下载简历</el-button>
                <el-button class="Collection">收藏简历</el-button>
            </div>
            <div v-for="item in data" :key="item.id" class="talentList">
                <div class="talentInfo">
                    <el-checkbox
                        v-model="item.choose"
                        @change="handleCheckChange(item.choose,item.id)"
                    ></el-checkbox>
                    <img :src="item.photo" alt />
                    <div class="info">
                        <h4>{{item.name}}</h4>
                        <p>
                            {{item.sex==1?"男":'女'}}
                            <i></i>
                            {{item.age}}岁
                            <i></i>
                            {{item.currentResidenceText?item.currentResidenceText:'祖籍:未填写'}}
                            <i></i>
                            {{options.education.find(val=>val.val===item.education).name}}
                        </p>
                        <p>
                            <span
                                v-if="item.resumeEducationOutVo"
                            >{{item.resumeEducationOutVo[0].startTime?item.resumeEducationOutVo[0].startTime.slice(0,7).replace('-','.'):''}}-{{item.resumeEducationOutVo[0].endTime?item.resumeEducationOutVo[0].endTime.slice(0,7).replace('-','.'):''}}</span>
                            <span v-else>学历暂无</span>
                            <span>{{item.resumeEducationOutVo?item.resumeEducationOutVo[0].school:''}}</span>
                            <span>{{item.resumeEducationOutVo?item.resumeEducationOutVo[0].major:''}}</span>
                        </p>
                    </div>
                </div>
                <ul class="workExp" v-if="item.resumeWorkOutVo">
                    <li>
                        <p>{{item.resumeWorkOutVo[0].startTime?item.resumeWorkOutVo[0].startTime.slice(0,7).replace('-','.'):''}} - {{item.resumeWorkOutVo[0].endTime?item.resumeWorkOutVo[0].endTime.slice(0,7).replace('-','.'):'至今'}}</p>
                        <p>
                            {{item.resumeWorkOutVo[0].company}}
                            <i></i>
                            {{item.resumeWorkOutVo[0].job}}
                        </p>
                    </li>
                    <li v-if="item.resumeWorkOutVo[1]">
                        <p>
                            {{item.resumeWorkOutVo[1].startTime?item.resumeWorkOutVo[1].startTime.slice(0,7).replace('-','.'):''}} - {{item.resumeWorkOutVo[1].endTime?item.resumeWorkOutVo[1].endTime.slice(0,7).replace('-','.'):'至今'}}
                            <i></i>
                        </p>
                        <p>
                            {{item.resumeWorkOutVo[1].company}}
                            <i></i>
                            {{item.resumeWorkOutVo[1].job}}
                        </p>
                    </li>
                </ul>
                <div class="workExp" v-else>无工作经验</div>
                <div class="refreshTime">
                    <p>更新时间：{{item.refreshTime?item.refreshTime.slice(0,10):'暂无更新时间'}}</p>
                </div>
            </div>
        </div>
        <div class="page">
            <el-pagination
                background
                @current-change="handleCurrentChange"
                :page-size="size"
                layout="prev, pager, next"
                :total="total"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
import { talentInfo, education, work_exp, area, jobList } from '../../../api/talentPool';
export default {
    name: '',
    data() {
        var checkAge = (rule, val, callback) => {
            if (val <= this.form.age_start) {
                callback(new Error('请确认年龄范围!'));
            } else {
                callback();
            }
        };
        return {
            total: 0,
            page: 1,
            size: 10,
            checkAll: false,
            options: {},
            activeData: [
                { label: '最近三天', val: 1 },
                { label: '最近一周', val: 2 },
                { label: '最近两周', val: 3 },
                { label: '最近一个月', val: 4 },
                { label: '最近二个月', val: 5 },
                { label: '最近三个月', val: 6 },
                { label: '最近六个月', val: 7 },
                { label: '最近一年', val: 8 }
            ],
            form: {
                job_name: '',
                company_name: '',
                work_content: '',
                school_name: '',
                award_name: '',
                work_place: '',
                hope_trade: [],
                education: '',
                work_exp: '',
                active_data: 5,
                age_start: '',
                age_end: ''
            },
            data: [],
            rules: {
                age_start: [{ min: 18, max: 60, message: '年龄范围18-60岁' }],
                age_end: [{ validator: checkAge }, { min: 18, max: 60, message: '年龄范围18-60岁' }]
            }
            // sort: [
            //     { column: 'name', type: 'asc' },
            //     { column: 'company_id', type: 'desc' }
            // ]
        };
    },
    created() {
        this.getTalentInfo();
        let obj = {
            education,
            work_exp,
            area,
            jobList
        };
        Promise.all(Object.values(obj).map(item => item())).then(data => {
            console.log(data);
            Object.keys(obj).forEach((item, index) => {
                this.options[item] = data[index].data;
            });
            console.log(this.options);
        });
    },
    methods: {
        handleClose(key) {
            this.form[key] = '';
        },
        handleCheckAllChange(val) {
            this.data.forEach(item => {
                item.choose = val;
            });
            this.options = this.data.map(item => (item.choose ? item.id : null));
            console.log(val);
            console.log(this.options);
        },
        handleCheckChange(value, val) {
            this.options = this.data.map(item => (item.choose ? item.id : null));
            this.checkAll = this.data.every(item => item.choose);
            console.log(value, val);
            console.log(this.options);
        },
        getTalentInfo() {
            let condition = Object.keys(this.form).map(item =>
                item === 'work_place'
                    ? { column: item, type: 'like', value: this.form[item] }
                    : item === 'hope_trade'
                    ? { column: item, type: 'like', value: this.form[item][this.form[item].length - 1] }
                    : item === 'education' || item === 'work_exp'
                    ? { column: item, type: 'eq', value: this.form[item] }
                    : { column: item, type: '', value: this.form[item] }
            );
            console.log(condition);

            // let query = {
            //     page: this.page,
            //     size: this.size,
            //     condition: JSON.stringify(condition)
            //     // sort:this.sort
            // };
            let file = new FormData();
            file.append('page', this.page);
            file.append('size', this.size);
            file.append('condition', JSON.stringify(condition));
            talentInfo(file).then(data => {
                console.log(data);

                if (data.success) {
                    console.log(data.data.records);
                    if (data.data.records) {
                        this.total = data.data.total;
                        this.data = data.data.records.map(item => {
                            item.choose = false;
                            return item;
                        });
                    } else {
                        this.data = [];
                    }
                    console.log(this.data);
                }
            });
        },
        onSearch() {
            console.log(this.form);
            this.getTalentInfo();
        },
        handleCurrentChange(val) {
            this.page = val;
            this.getTalentInfo();
            console.log(`当前页: ${val}`);
        }
    }
};
</script>

<style scoped>
.search {
    background: rgba(255, 255, 255, 1);
    opacity: 1;
}
.search .inp_box {
    padding: 28px 44px 0;
    display: flex;
    flex-wrap: wrap;
}
.search .inp_box .el-form-item {
    margin-right: 28px;
    width: 342px;
}
.search .inp_box .el-form-item /deep/ .el-form-item__label {
    height: 40px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(85, 85, 85, 1);
    opacity: 1;
    line-height: 40px;
    width: 102px;
}
.search .inp_box .el-form-item /deep/ .el-input {
    display: inline-block;
    width: 240px;
}
.search .inp_box .el-form-item .el-input /deep/ .el-input__inner {
    height: 40px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(232, 232, 232, 1);
    opacity: 1;
}
.search .sel_box {
    padding: 28px 44px 0;
    display: flex;
    flex-wrap: wrap;
}
.search .sel_box .el-form-item /deep/ .el-form-item__label {
    height: 40px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(85, 85, 85, 1);
    opacity: 1;
    line-height: 40px;
    width: 102px;
}
.search .sel_box .age .el-form-item .el-input /deep/ .el-input__inner {
    width: 106px;
    height: 40px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(232, 232, 232, 1);
    opacity: 1;
}
.search .sel_box .age /deep/ .startAge_box {
    width: 214px;
    display: inline-block;
}
.search .sel_box .el-form-item .el-select /deep/ .el-input__inner {
    width: 240px;
    height: 40px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(232, 232, 232, 1);
    opacity: 1;
}
.search .sel_box .el-form-item .el-cascader /deep/ .el-input__inner {
    width: 240px;
    height: 40px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(232, 232, 232, 1);
    opacity: 1;
}
.search .sel_box .el-form-item {
    margin-right: 28px;
    width: 342px;
}
.search .sel_box .age .startAge_box /deep/ .el-form-item__content {
    display: inline-block;
    width: 80px;
}
.search .sel_box .age /deep/ .age_box {
    display: inline-block;
    margin-left: -6px;
    margin-right: 0;
    width: 80px;
}
.search .sel_box .age {
    width: 342px;
    margin-right: 28px;
}
.all {
    padding-left: 44px;
    margin: 16px 0;
    width: 1200px;
    height: 50px;
    line-height: 50px;
    background: rgba(255, 255, 255, 1);
    opacity: 1;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}
.all .downLoad {
    margin-left: 32px;
    width: 94px;
    height: 24px;
    line-height: 0;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    background: rgba(24, 147, 252, 1);
    opacity: 1;
}
.all .Collection {
    line-height: 0;
    width: 94px;
    height: 24px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(24, 147, 252, 1);
    opacity: 1;
    margin-left: 16px;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(24, 147, 252, 1);
}
.talentList {
    margin-bottom: 12px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    padding: 23px 44px;
    width: 1200px;
    height: 134px;
    background: rgba(255, 255, 255, 1);
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.talentList .talentInfo,
.refreshTime {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.talentList .talentInfo img {
    width: 72px;
    height: 72px;
    margin: 0 32px;
    background: rgba(242, 242, 242, 1);
    border-radius: 50%;
    opacity: 1;
}
.talentList .talentInfo .info {
    width: 340px;
}
.talentList .talentInfo .info h4 {
    height: 22px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 22px;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
}
.talentList .talentInfo .info p {
    margin-top: 8px;
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: rgba(85, 85, 85, 1);
    opacity: 1;
}
.talentList .talentInfo .info p span {
    display: inline-block;
    margin-right: 16px;
}

.talentList i {
    vertical-align: top;
    display: inline-block;
    margin: 3px 10px 0;
    width: 0px;
    height: 14px;
    border: 0.5px solid rgba(112, 112, 112, 1);
    opacity: 1;
}
.talentList .workExp {
    width: 400px;
    color: #1893fc;
}
.talentList .workExp li {
    margin-top: 8px;
}
.talentList .workExp li p:nth-child(1) {
    margin-bottom: 4px;
    height: 22px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 22px;
    color: rgba(51, 51, 51, 1);
    opacity: 1;
}
.talentList .workExp li p:nth-child(2) {
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: rgba(85, 85, 85, 1);
    opacity: 1;
}
.talentList .refreshTime {
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: rgba(85, 85, 85, 1);
    opacity: 1;
}
.bottom_box {
    border-top: 1px solid rgba(232, 232, 232, 1);
    padding: 0 74px;
    height: 46px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.btn {
    margin: 0;
}
.btn /deep/ .el-button {
    width: 148px;
    height: 34px;
    background: rgba(0, 147, 255, 1);
    opacity: 1;
}
.el-tag {
    margin-left: 10px;
}
.page {
    text-align: center;
    margin-bottom: 30px;
}
</style>c